<template>
  <div class="WareHouseDetail">
    <div class="wbg brr">
      <el-form ref="form" :model="form" :rules="rules">
        <div class="pdd" v-loading="loading">
          <div class="flex flexAuto">
            <el-form-item label="仓库代码" class="flex1">
              <el-input v-model="form.code" disabled></el-input>
            </el-form-item>
            <el-form-item label="仓库名称" class="flex1" prop="name">
              <el-input v-model="form.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="仓库类型" class="flex1" prop="type">
              <el-select
                v-model="form.type"
                placeholder="请选择"
                class="el-input"
                clearable
              >
                <el-option v-for="(item, index) in warehouseType" :key="index" :label="item.name" :value="item.type"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="省/市/区" class="flex2" prop="location">
              <el-cascader
                v-model="cascaderValue"
                :options="cascaderOptions"
                @change="addressChooes"
                :placeholder="cascaderPlaceholder"
                class="el-input"
                :class="cascaderPlaceholder !== '请选择' ? 'placeholder' : ''"
                ref="ssq"
              >
              </el-cascader>
            </el-form-item>
            <el-form-item class="flex1"></el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="详细地址" class="flex2">
              <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="仓库状态" class="flex1">
              <div class="el-input">
                <el-radio v-for="(item, index) in warehouseStatus" :key="index" v-model="form.status" :label="item.type.toString()">{{ item.status }}</el-radio>
                <!-- <el-radio v-model="form.status" label="1">启用</el-radio> -->
                <!-- <el-radio v-model="form.status" label="0">停用</el-radio> -->
              </div>
            </el-form-item>
          </div>
          <div class="flex flexAuto">
            <el-form-item label="仓库面积" class="flex1">
              <el-input v-model="form.surface">
                <template #append>m³</template>
              </el-input>
            </el-form-item>
            <el-form-item label="负责人" class="flex1" prop="personName">
              <el-input v-model="form.personName"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" class="flex1">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item>
          <div class="upup">
            <el-button round @click="backRouter">返回</el-button>
            <el-button round type="primary" @click="newWearhouse">提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { codeNext, newWearhouse, getWearhouseMore, putWearhouse } from '@/api/warehouse'
import { warehouseType, warehouseStatus } from '@/constant/warehouse'
import {
  regionDataPlus,
  CodeToText
} from 'element-china-area-data'
export default {
  name: 'WearHouseDetai',
  data () {
    return {
      tabTitle: '新增仓库',
      warehouseType,
      warehouseStatus,
      loading: false,
      cascaderOptions: regionDataPlus,
      cascaderValue: [],
      cascaderPlaceholder: '请选择',
      form: {
        code: '',
        name: '',
        type: '',
        address: '',
        status: '0',
        surface: '',
        personName: '',
        phone: '',
        province: '',
        city: '',
        area: '',
        location: ''
      },
      rules: {
        name: [{ required: true, message: '请输入用户名' }],
        type: [{ required: true, message: '请选择仓库类型' }],
        location: [{ required: true, message: '请选择省/市/区' }],
        personName: [{ required: true, message: '请输入负责人' }]
      },
      uploadflag: false
    }
  },
  created () {
    this.setPage()
    this.setForm()
  },
  methods: {
    // 初始化表单
    async setForm () {
      this.loading = true
      if (!this.$route.params?.id) {
        const res = await codeNext('CK')
        this.form.code = res.data.data
        this.uploadflag = false
      } else {
        const res = await getWearhouseMore(this.$route.params.id)
        console.log(res)
        if (res.data.data !== null) {
          this.form = res.data.data
          this.form.status = res.data.data.status.toString()
          this.cascaderValue.push(res.data.data.province, res.data.data.city, res.data.data.area)
          this.$refs.ssq.inputValue = res.data.data.location.split('/').join(' / ')
          console.log(this.$refs.ssq.activePath)
          const activePath = []
          let num = 1
          this.cascaderValue.forEach(item => {
            if (CodeToText[item] !== undefined) {
              activePath.push({
                label: CodeToText[item],
                level: num
              })
            } else {
              activePath.push({
                label: '市辖区',
                level: num
              })
            }
            num++
          })
          this.$nextTick(() => {
            this.$refs.ssq.activePath = activePath
            console.log(this.$refs.ssq.activePath)
          })
          this.cascaderPlaceholder = res.data.data.location.split('/').join(' / ')
          this.uploadflag = true
        } else {
          this.backRouter()
          this.$store.dispatch('removeTab', { thisPath: this.$route.path, path: this.$route.path })
          this.$message.warning('获取数据失败')
        }
      }
      this.loading = false
    },
    addressChooes (value) {
      this.form.location = [CodeToText[value[0]], CodeToText[value[1]], CodeToText[value[2]]].join('/')
      this.form.province = value[0]
      this.form.city = value[1]
      this.form.area = value[2]
    },
    backRouter () {
      this.$router.push('/manage-base-info/warehouse')
    },
    async newWearhouse () {
      await this.$refs.form.validate()
      if (!this.$route.params?.id) {
        await newWearhouse(this.form)
      } else {
        await putWearhouse(this.form)
        this.$store.dispatch('removeTab', { thisPath: this.$route.path, path: this.$route.path })
      }
      this.$message.success('提交成功')
      this.$refs.form.resetFields()
      this.setForm()
      this.backRouter()
    },
    // 用于给面包屑添加屑
    setPage () {
      console.log(this.$route.params)
      this.tabTitle = this.$route.params?.id ? '编辑仓库' : '新增仓库'
      this.$store.dispatch('keepAliveListFn', this.$options.name)
      const switchTab = {
        modelName: this.$options.name,
        path: this.$route.path,
        name: this.tabTitle,
        show: true
      }
      if (
        !this.$store.state.switchTab.find(
          (item) => item.path === this.$route.path
        )
      ) {
        if (this.$route.params?.id) {
          switchTab.root = false
        } else {
          switchTab.root = true
        }
        this.$store.commit('pushSwitchTab', switchTab)
      }
    }
  },
  activated () {
    this.setPage()
    console.log(this.uploadflag)
    if (this.$route.params?.id && this.uploadflag) {
      this.setForm()
    }
  }
}
</script>

<style lang="scss" scoped>
.pdd {
  padding: 30px 20px 10px 20px;
  .el-form-item {
    padding: 0 10px;
  }
}
.upup {
  padding: 30px;
  border-top: 1px solid #f1f1f1;
  text-align: center;
  .el-button {
    margin: 0 15px;
    width: 170px;
  }
}
</style>
